import React, { memo } from "react";
import type { FC, ReactNode } from "react";
import { AlnumPageWrapper } from "./style";
import { useAppSelector } from "@/store";
import AreaItemv1 from "@/components/area-itemv1";
import SkeletonListv1 from "@/components/skeleton-listv1";
import { shallowEqual } from "react-redux";

interface IProps {
  children?: ReactNode;
}

const AlbumPage: FC<IProps> = () => {
  const { paidAlbums } = useAppSelector((state) => ({
    paidAlbums: state.musicLibrary.paidAlbums
  }), shallowEqual)
  return <AlnumPageWrapper>
    {paidAlbums.length <= 0 && <SkeletonListv1 />}
    {paidAlbums.length > 0 &&
      paidAlbums.map(item => (
        <AreaItemv1 key={item.albumId} itemDate={item} urlwidth={400} navigatePath="/album" />
      ))
    }
  </AlnumPageWrapper>;
};

export default memo(AlbumPage);